<template>
  <div class="musicScore-container">
    <div class="musicScore-top">
      <el-link @click="GoMusicScoreDetail" :underline="false" class="title">{{
        musicScore.music_score_title
      }}</el-link>
      <span class="create_time">{{ musicScore.create_time | formatDate }}</span>
    </div>
    <div class="musicScore-center">
      <span v-html="musicScore.music_score_abstract"></span>
    </div>
    <div class="musicScore-bottom">
      <div class="info-list">
        <span class="view">阅读 {{ musicScore.view_count }}</span>
        <span class="view">点赞: {{ musicScore.like_count }}</span>
        <span class="view">评论: {{ musicScore.comment_count }}</span>
      </div>
      <div class="options">
        <el-button class="CustomBtn" @click="GoMusicScoreDetail"
          >浏览</el-button
        >
        <el-button class="CustomBtn" @click="EditMusicScore">编辑</el-button>
        <el-button class="CustomBtn" @click="deleteMusicScore">删除</el-button>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    musicScore: {
      type: Object,
      required: true
    }
  },
  components: {},
  data() {
    return {
      currentMusicScore: {}
    }
  },
  computed: {},
  watch: {
    // 更换props参数到data
    musicScore: {
      immediate: true,
      deep: true,
      handler(val, oldval) {
        this.currentMusicScore = val
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 浏览功能
    GoMusicScoreDetail() {
      this.$router.push({
        name: 'MusicScoreDetail',
        params: { id: this.musicScore.id }
      })
    },
    // 删除功能
    deleteMusicScore() {
      let formData = new FormData()
      formData.append('music_score_id', this.musicScore.id)
      this.$confirm('此操作将永久删除该乐谱, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$API.musicScore.deleteMusicScore(formData)
          console.log(res)
          if ((res.status = 200)) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 发送事件
            this.$bus.$emit('DeleteMusicScoreSuccess')
          } else {
            this.message.error(res.msg)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    EditMusicScore() {
      this.$router.push({
        path: '/publishmusicScore',
        query: { id: this.musicScore.id, isEdit: true }
      })
    }
  }
}
</script>

<style scoped>
.musicScore-container {
  line-height: 2em;
}
.musicScore-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.title {
  font-size: 16px;
}
.create_time {
  color: #9f9f9c;
}
.musicScore-center {
  width: 100%;
  color: #9fa2af;
}
.musicScore-bottom {
  width: 100%;
  display: flex;
  flex-direction: space-between;
}

.info-list {
  width: 50%;
  color: #999aad;
}
.info-list span {
  margin-right: 10px;
}
.options {
  width: 50%;
  display: flex;
  justify-content: right;
}
.options * {
  margin-left: 10px;
}
</style>
